<!--在线咨询-->
<template>
	<view>
		<view class="box">
			<view class="content_box">
				<view class="time_box">{{time}}</view>
				<ul class="chat_box">
					<li v-for="(item,index) in chatList" :key="index">
						
						<view v-if="item.type=='user'" class="user">
							<view class="boxs">
								<view class="nickname">{{item.nickname}}</view>
								<view class="info">{{item.info}}</view>
							</view>
							<view class="photo">
							</view>
						</view>
						<view v-if="item.type=='robot'" class="robot">
							<view class="photo">
							</view>
							<view class="boxs">
								<view class="nickname">{{item.nickname}}</view>
								<view class="info">{{item.info}}</view>
							</view>
							
						</view>
					</li>
				</ul>
				
			</view>
			<view class="footer_box">
				<view class="footer">
					<textarea auto-height v-model="inputText" class="info_input" placeholder="请输入您想要咨询的问题" />
					<button class="info_send" @click="sendInfo">发送</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				time:"",
				chatList:[
					{"nickname":"我",type:"user",info:"您好，我想咨询一个问题，就是我肚子疼，怎么办"},
					{"nickname":"智慧机器人",type:"robot",info:"多喝热水"}
				],
				inputText:"",
			}
		},
		onLoad() {
			this.init();
		},
		methods: {
			init(){
				let date=new Date();
				let yyyy=date.getFullYear();
				let MM=date.getMonth()+1;
				let dd=date.getDate();
				if(MM<10){
					MM="0"+MM;
				}
				let HH=date.getHours();
				if(HH<10){
					HH="0"+HH;
				}
				let mm=date.getMinutes();
				if(mm<10){
					mm="0"+mm;
				}
				let ss=date.getSeconds();
				if(ss<10){
					ss="0"+ss;
				}
				let time=yyyy+"-"+MM+"-"+dd+" "+HH+":"+mm+":"+ss;
				this.time=time;
			},
			sendInfo(){
				if(this.inputText==""){
					return;
				}
				let info={"nickname":"我","type":"user","info":this.inputText};
				this.chatList.push(info);
				this.inputText="";
				let info2={"nickname":"智慧机器人","type":"robot","info":"暂无在线医生..."};
				this.chatList.push(info2);
			}
		}
	}
</script>

<style>
.content_box{
	width: 100%;
}
.content_box .time_box{
	width: 60%;
	margin: 0 auto;
	text-align: center;
	background-color: #c2c2c2;
	color: #FFFFFF;
	padding: 10px;
	border-radius: 30px;
	top: 20px;
	position: relative;
}
.content_box .chat_box{
	margin-top: 30px;
	overflow-y:scroll ;
	padding-bottom: 80px;
	padding-left: 10px;
	padding-right: 10px;
}
.content_box .chat_box li{
	margin-top: 20px;
}
.photo{
	width: 48px;
	height: 48px;
}
.info{
	padding: 10px;
	margin-top: 10px;
	border-radius: 4px;
	display: inline-block;
}
.nickname{
	padding-left: 10px;
	padding-right: 10px;
}
.boxs{
	max-width: 70%;
}
.robot{
	display: flex;
	float: left;
	width: 100%;
}
.robot .photo{
	background-image: url(../../static/144@2x.png);
	background-size: 100% 100%;
}
.robot .info{
	background-color:#FFFFFF;
	margin-left: 10px;
}

.user{
	text-align: right;
	display: flex;
	width: 100%;
	justify-content: flex-end;
	
}
.user .photo{
	background-image: url(../../static/148@2x.png);
	background-size: 100% 100%;
	
}
.user .info{
	text-align: left;
	background-color:#E0F2FF;
	position: relative;
	right: 10px;
}

.footer{
	width: 100%;
	position: fixed;
	background-color: #FFFFFF;
	bottom: 0px;
	padding-top: 10px;
	padding-bottom:10px ;
}

.footer .info_input{
	width: 65%;
	float: left;
	background-color: #F0F0F0;
	padding: 10px;
	margin-left: 10px;
	border-radius: 8px;
}
.footer .info_send{
	background-color: #3692FF;
	color: #FFFFFF;
	width: 70px;
	height: 40px;
	line-height: 40px;
	float: right;
	margin-right: 10px;
}
</style>
